<template>
	<div>
		<div class="title">猜你喜欢</div>
		<ul>
			<li class="item border-bottom" v-for="item of recommendList" :key="item.id">
					<img class="item-img" :src="item.imgUrl" alt="">
				<div class="item-info">
					<p class="item-title">{{item.title}}</p>
					<p class="item-desc">{{item.desc}}</p>
					<button class="item-button">查看详情</button>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'HomeRecommend',
	props: {
		recommendList: Array
	}
}
</script>

<style lang="stylus" scoped>
	.title
	  line-height: .8rem
	  background: #ccc
	  text-indent: .2rem
	  text-align: center
	.item
	  overflow: hidden
	  display: flex
	  height: 1.9rem
	  .item-img
	    width: 1.7rem
	    height: 1.7rem
	    padding: .1rem
	  .item-info
	    flex: 1
	    padding: .1rem
	    .item-title
	      line-height: .54rem
	      font-size: .32rem
	    .item-desc
	      line-height: .4rem
	      color: #ccc
	    .item-button
	      line-height: .44rem
	      margin-top: .16rem
	      background: #ff9300
	      padding: 0 .1rem
	      border-radius: .06rem
</style>
